<template>
  <div class="system-header-mine">
    <div class="system-header-mine__info">
      <div class="system-header-mine__info-pic">
        <img :src="getHeadPic" style="display: block" alt="" />
      </div>
      <div class="system-header-mine__info-box">
        <div class="system-header-mine__info-item userinfo">{{ users.userName }} <i-ion-copy-outline @click="copy(users.name)"/></div>
        <div class="system-header-mine__info-item email">{{ users.email }} <em v-if="users.area && users.phone">/</em> {{ users.area }}{{ users.phone }} </div>
      </div>
    </div>
    <div class="system-header-mine__list">
      <div class="system-header-mine__list-item" @click="openTransactions">
        <i-ant-design-transaction-outlined />
        <span>{{ t('UserInfo.Transactions') }}</span>
      </div>
      <div class="system-header-mine__list-item" @click="openRecordQuery">
        <i-jam-document />
        <span>{{ t('BetRecord.RecordQuery') }}</span>
      </div>
      <div class="system-header-mine__list-item" @click="openUserInfo">
        <i-bi-person-lines-fill />
        <span>{{ t('userData.userInfo') }}</span>
      </div>
      <div class="system-header-mine__list-item" @click="openDailyTasks">
        <i-ph-gift-duotone />
        <span>{{ t('home.DailyTasks') }}</span>
      </div>
      <div class="system-header-mine__list-item" @click="openRebate">
        <i-ic-baseline-settings-backup-restore />
        <span>{{ t('menuActive.rebate') }}</span>
      </div>
      <div class="system-header-mine__list-item" @click="openAccessRecord">
        <i-tabler-calendar-dollar />
        <span>{{ t('Transaction.cqjl') }}</span>
      </div>
    </div>
    <div class="system-header-mine__logout" @click="logout">
      <i-ic-outline-logout /> {{ t('UserInfo.Logout') }}
    </div>
  </div>
  <Dialog
    v-model:visible="dialogConfig.show"
    v-model:title="dialogConfig.title"
    :width="dialogConfig.width"
    v-model:autoHeight="dialogConfig.autoHeight"
    :headerFixed="dialogConfig.headerFixed"
  >
    <CapitalRecord v-if="dialogConfig.type === 'transactions'"/>
    <BettingRecord v-else-if="dialogConfig.type === 'recordQuery'"/>
    <UserinfoRecord v-else-if="dialogConfig.type === 'userInfo'"/>
    <MemberRebate v-else-if="dialogConfig.type === 'rebate'"/>
    <AccessRecord v-else-if="dialogConfig.type === 'cqjl'"/>
  </Dialog>
</template>

<script setup lang="ts" name="UserInformation">
import userinfo from '@/store/userinfo';
import nocache from '@/store/nocache';
import { copy } from '@/utils/format';

const piniaUserinfo:any = userinfo();
const piniaNocache = nocache();
const { t } = useI18n();

const props = defineProps({
  getHeadPic: {
    type: String,
    defualt: ''
  }
})

const data:any = reactive({
  dialogConfig: {
    show: false,
    type: '',
    title: "",
    headerFixed: false,
    width: 600,
    autoHeight: false
  },
});

const {
  dialogConfig,
} = toRefs(data);

// 计算属性
const users = computed(()=>{
  return piniaUserinfo.getUserinfo.user || {};
});

const emits = defineEmits(['logouted']);

// 退出登录
const logout = () => {
  piniaUserinfo.logout();
  emits('logouted', true);
}

// 打开资金记录
const openTransactions = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.width = 1000;
  dialogConfig.value.title = t('UserInfo.Transactions');
  dialogConfig.value.type = 'transactions';
}

// 打开投注记录
const openRecordQuery = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.width = 1200;
  dialogConfig.value.title = t('BetRecord.RecordQuery');
  dialogConfig.value.type = 'recordQuery';
}
// 打开个人资料
const openUserInfo = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.width = 1050;
  dialogConfig.value.title = t('userData.userInfo');
  dialogConfig.value.type = 'userInfo';
}
// 打开每日任务
const openDailyTasks = () => {
  piniaNocache.openTask();
}
// 打开会员反水
const openRebate = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.width = 900;
  dialogConfig.value.title = t('menuActive.rebate');
  dialogConfig.value.type = 'rebate';
}
// 打开存取记录
const openAccessRecord = () => {
  dialogConfig.value.show = true;
  dialogConfig.value.width = 1000;
  dialogConfig.value.title = t('Transaction.cqjl');
  dialogConfig.value.type = 'cqjl';
}
</script>

<style lang="scss" scoped>
.system-header-mine{
  padding: var(--rem-20);
  padding-top: 80rem;
  .system-header-mine__info{
    display: flex;
    align-items: center;
    .system-header-mine__info-pic{
      border-radius: var(--rem-80);
      padding: var(--rem-8);
      border: 1px solid var(--z-font-def);
      img{
        display: block;
        width: var(--rem-80);
        height: var(--rem-80);
        border-radius: var(--rem-80);
      }
    }
    .system-header-mine__info-box{
      margin-left: var(--rem-30);
      .system-header-mine__info-item{
        height: var(--rem-30);
        line-height: var(--rem-30);
        display: flex;
        align-items: center;
        svg{
          margin-left: var(--rem-10);
          cursor: pointer;
        }
        &.userinfo{
          font-size: var(--rem-20);
          font-weight: bold;
          color: var(--z-font-anti);
        }
        &.email{
          em{
            margin: 0 var(--rem-10);
            font-style: normal;
          }
        }
      }
    }
  }
  .system-header-mine__list{
    display: flex;
    flex-wrap: wrap;
    border-radius: var(--rem-20);
    background-color: var(--z-border-def);
    padding: var(--rem-30);
    margin-top: var(--rem-20);
    .system-header-mine__list-item{
      width: 50%;
      height: var(--rem-25);
      line-height: var(--rem-25);
      margin: var(--rem-15) 0;
      display: flex;
      align-items: center;
      span{
        cursor: pointer;
        transition: all 300ms;
        margin-left: 2rem;
        &:hover{
          color: var(--z-font-anti);
        }
      }
    }
  }
  .system-header-mine__logout{
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-top: var(--rem-15);
    user-select: none;
    padding-left: var(--rem-30);
  }
  .system-header-mine__list svg,
  .system-header-mine__logout svg{
    color: var(--swiper-theme-color);
    font-size: var(--rem-15);
    margin-right: var(--rem-2);
  }
}
</style>
